<template>
  <div class="accessory">
    <div class="accessory-switch">
      <div class="accessory-switch-header">云搜索开关</div>
      <el-form :model="CloudSearchSet" label-width="207px" class="accessory-settingForm" ref="dataForm">
        <el-form-item label="启用云视频:" prop="switch">
          <span style="color:#409EFF;margin-right:10px;">已启用</span>
          <el-button type="danger" size="mini" @click="handleClickClose">关闭</el-button>
          <p>
            多姿多彩的教学资源，一处搜齐。
            <a href="" style="color:#428bca">点击这里</a>
            了解详情
          </p>
        </el-form-item>
        <el-form-item label="所需类型:">
          <el-checkbox-group v-model="CloudSearchSet.requiredTypeArr">
            <el-checkbox v-for="business in businessList" :label="business.id" :key="business.id">{{ business.name }}</el-checkbox>
          </el-checkbox-group>
          <p>*勾选所需类型后，学员搜索时可以查看对应类型搜索结果，可以根据网校实际业务情况进行配置。</p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left:40px;" @click="createData()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {getTenantId} from '@/utils/auth';
  import {addData, getData} from '@/api/cloud/cloud_search_set';

  export default {
    data() {
      return {
        CloudSearchSet: {
          status: '1',
          requiredTypeArr: []
        },
        businessList: [{id: "1", name: "课程"}, {id: "2", name: "教师"}, {id: "3", name: "小组话题"}, {id: "4", name: "班级"}, {id: "5", name: "资讯"}]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getData(getTenantId()).then(response => {
          if (response.data) {
            if (response.data.status) {
              this.CloudSearchSet.status = response.data.status
            }
            if (response.data.requiredTypeArr) {
              this.CloudSearchSet.requiredTypeArr = response.data.requiredTypeArr
            }
          }
        }).catch(err => {
          console.log(err)
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.CloudSearchSet.tenantId = getTenantId();
            this.CloudSearchSet.status = '1';
            addData(this.CloudSearchSet).then(() => {
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      },
      handleClickClose() {
        this.CloudSearchSet.tenantId = getTenantId();
        this.CloudSearchSet.status = '0';
        addData(this.CloudSearchSet).then(() => {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          });
        });
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss">
  .accessory {
    .accessory-switch-header {
      margin-bottom: 30px;
    }

    &-settingForm {
      p {
        color: #737373;
        margin: 0;
        margin-left: 40px;
      }

      .el-form-item__label {
        margin-right: 40px;
        font-size: 16px;
      }
    }

    &-switch {
      overflow: hidden;

      &-header {
        font-size: 16px;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;
      }
    }
  }
</style>
